<template>
  <view class="container">
    <view class="header">
      <text class="title">用户注册</text>
    </view>
    
    <view class="input-group">
      <text class="input-label">用户名</text>
      <input class="input-field" v-model="name" type="text" placeholder="请输入用户名" />
    </view>
    
    <view class="input-group">
      <text class="input-label">姓名 <text style="color:red">*</text></text>
      <input class="input-field" v-model="titlename" type="text" placeholder="请输入姓名" />
    </view>
    
    <view class="input-group">
      <text class="input-label">手机号 <text style="color:red">*</text></text>
      <input class="input-field" v-model="tel" type="text" placeholder="请输入手机号" />
    </view>
    
    <view class="input-group">
      <text class="input-label">车牌号 <text style="color:red">*</text></text>
      <input class="input-field" v-model="car" type="text" placeholder="请输入车牌号" />
    </view>
    
    <view class="input-group">
      <text class="input-label">身份证号</text>
      <input class="input-field" v-model="sfz" type="text" placeholder="请输入身份证号" />
    </view>
    
    <view class="input-group">
      <text class="input-label">详细地址</text>
      <input class="input-field" v-model="city" type="text" placeholder="请输入详细地址" />
    </view>
    
    <view class="input-group">
      <text class="input-label">邮箱</text>
      <input class="input-field" v-model="email" type="text" placeholder="请输入邮箱" />
    </view>
    
    <view class="input-group">
      <text class="input-label">密码 <text style="color:red">*</text></text>
      <input class="input-field" v-model="password" type="password" placeholder="请输入密码" />
    </view>
    
    <button class="btn" @click="handleRegister">注册</button>
    
    <text class="link" @click="navigateToLogin">已有账号？立即登录</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      titlename: '',
      tel: '',
      car: '',
      sfz: '',
      city: '',
      email: '',
      password: ''
    }
  },
  methods: {
    handleRegister() {
      // 验证必填字段
      if (!this.titlename || !this.tel || !this.car || !this.password) {
        uni.showToast({
          title: '请填写所有必填字段',
          icon: 'none'
        });
        return;
      }
      
      // 简单的手机号验证
      if (!/^1[3-9]\d{9}$/.test(this.tel)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 密码长度验证
      if (this.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        });
        return;
      }
      
      uni.request({
        url: 'http://192.168.1.42:8000/api/auth.php?action=register',
        method: 'POST',
        data: {
          name: this.name,
          titlename: this.titlename,
          tel: this.tel,
          car: this.car,
          sfz: this.sfz,
          city: this.city,
          email: this.email,
          password: this.password
        },
        success: (res) => {
          if (res.data.error) {
            uni.showToast({
              title: res.data.message,
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: '注册成功',
              icon: 'success'
            });
            // 注册成功后自动登录
            uni.setStorageSync('user', res.data.user);
            // 跳转到首页
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        }
      });
    },
    navigateToLogin() {
      uni.switchTab({
        url: '/pages/user/login'
      });
    }
  }
}
</script>

<style>
.header {
  margin-bottom: 30px;
  text-align: center;
}
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
</style>